import React, { useEffect } from 'react';
import { modifySysStatus, getSystemNode, getNodeUpdate } from '~/API/index';
import * as echarts from 'echarts';
import { Message, Loading, Select } from '@knownsec/react-component';
import cn from 'classnames';
import i from '@/index.module.css';
import BreadCrumb from '@/components/BreadCrumb';
import s from '../systemLoad/style.module.css';
import { getErrorMessage } from '@/common/constant';
// import SelectAnt from '@/components/SelectAnt';

export default function SystemLoad() {
  const [searchInfo, setSearchInfo] = React.useState('');
  const [deviceList, setDevice] = React.useState([]);
  const [updateTime, setUpdatetime] = React.useState('');
  const [showLoading, setShowLoading] = React.useState(true);
  const [statusData, setStatusData] = React.useState({
    cpu_percent: 0,
    cpu_percent_list: [],
    disk_data_percent: 0,
    disk_data_percent_list: [],
    disk_sys_percent: 0,
    disk_sys_percent_list: [],
    ip_addr: '10.10.10.10',
    last_update_time: '2021-07-06 12:23:12',
    mem_percent: 0,
    mem_percent_list: [],
    net_bytes_recv: 0,
    net_bytes_recv_list: [],
    net_bytes_sent: 0,
    net_bytes_sent_list: [],
    net_packets_recv: 0,
    net_packets_recv_list: [],
    net_packets_sent: 0,
    net_packets_sent_list: [],
    running_time: '0天',
  });
  useEffect(() => {
    getSysNode();
  }, []);
  const getSysNode = () => {
    getSystemNode().then((res) => {
        const is_cluster=JSON.parse(localStorage.info).is_cluster
      setShowLoading(false);
      if (res.status == 'success') {
        const d = res.data?.node_list || [];
        d.map((v, index) => {
          v.label = v.node_ip + '(' + v.node_name + ')';
          v.value = index + '';
        });
        setDevice(d);
        setSearchInfo(0);
        const status=is_cluster?d[0].device_id:null
        getSysStatus(status);
        const ip=is_cluster?d[0].node_ip:res.data?.node_ip
        getdate(ip);
      }
    });
  };
  const getdate = (ip) => {
    getNodeUpdate({ node_ip: ip }).then((res) => {
      if (res.status === 'success') {
        setUpdatetime(res.data);
      }
    });
  };
  const getSysStatus = (id) => {
    setShowLoading(true);
    const params={ qtype: 'business'}
    id&&(params.device_id=id)
    modifySysStatus(params)
      .then((res) => {
        setShowLoading(false);
        if (res.status === 'success') {
          setStatusData(res.data);
          const times = res.data.created_at;
          drawLine('net_bytes_recv', res.data.net_bytes_recv_list, times);
          drawLine('net_bytes_sent', res.data.net_bytes_sent_list, times);
          drawLine('net_packets_recv', res.data.net_packets_recv_list, times);
          drawLine('net_packets_sent', res.data.net_packets_sent_list, times);
        }
      })
      .catch((err) => {
        setShowLoading(true);
        if (err.hasOwnProperty('status')) {
          Message.show({ type: 'error', message: getErrorMessage(err) });
        }
      });
  };
  const drawLine = (id, data, datax) => {
    const mayEcharts = echarts.init(document.getElementById(id));
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          return `
            <div>
            <span style="display: inline-block; height: 6px; width: 6px; border-radius: 50%; background-color: #0b6fd6; margin-right: 5px; vertical-align: middle;"></span>
            <span style="margin-right: 20px; color: #333;">${params[0].name}</span>
            <span style="color: #333;">${params[0].value}</span>
            </div>
          `;
        },
        extraCssText: 'background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 4px #ccc;'
      },
      grid: {
        top: '10%',
        bottom: '30%',
        right: '3%',
        left: '70',
      },
      xAxis: {
        type: 'category',
        data: datax,
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      series: [
        {
          data: data,
          type: 'line',
          showSymbol: false,
        },
      ],
    };
    mayEcharts.setOption(option);
    window.addEventListener('resize', () => {
      mayEcharts.resize();
    });
  };
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '系统状态' },
          { link: '', name: '业务负载', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.p24, i.pr)}>
            <Loading show={showLoading} label="" />
            <div className={cn(i.df, i.aic, i.jcsb, s.pr)}>
              <div>
                {/* <svg
                  className={i.vam}
                  width="48px"
                  height="48px"
                  viewBox="0 0 48 48"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                >
                  <g id="页面设计" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <g id="系统状态-业务负载" transform="translate(-184.000000, -171.000000)">
                      <g id="编组-11" transform="translate(184.000000, 171.000000)">
                        <circle
                          id="椭圆形备份-3"
                          stroke="#0B6FD6"
                          fillOpacity="0.1"
                          fill="#0B6FD6"
                          cx="24"
                          cy="24"
                          r="23.5"
                        ></circle>
                        <g
                          id="3.Icon/1.线性/2.业务安全类/业务管理系统"
                          transform="translate(8.000000, 8.000000)"
                        >
                          <path
                            d="M23.1666667,5.25 C24.6952223,5.25 25.9104155,6.51611127 25.9952654,8.07556914 L26,8.25 L26,20.25 L25.9707674,20.2509809 C26.5846527,20.5924382 27,21.2477143 27,22 L27,25 C27,26.1045695 26.1045695,27 25,27 L7,27 C5.8954305,27 5,26.1045695 5,25 L5,22 C5,21.2526936 5.40986724,20.6011168 6.01706909,20.2578023 C6.00564366,20.1740649 6,20.0876915 6,20 L6,10 C6,8.8954305 6.8954305,8 8,8 L13.0097149,8.00039733 C13.1243538,6.53302475 14.2405585,5.34269831 15.6648249,5.25516091 L15.8333333,5.25 L23.1666667,5.25 Z M7.975,21.999 L7,21.9999955 L7,24.9999955 L25,24.9999955 L25,21.9999955 L23.1937892,21.9999955 C22.3943366,23.2386619 21.3319675,23.9999955 20,23.9999955 C18.7420318,23.9999955 17.7245382,23.3209064 16.9418905,22.2019744 L16.8062109,21.9999955 L8,22 L7.975,21.999 Z M23.1666667,7.25 L15.8333333,7.25 C15.4248777,7.25 15.0564451,7.62009874 15.0058958,8.12996285 L15,8.25 L15,20 L16.8062109,20 C17.4288521,20 18.0124812,20.2896795 18.3891436,20.7775451 L18.4866122,20.9154443 C18.953271,21.6384814 19.4577336,22 20,22 C20.4970781,22 20.9623904,21.6962234 21.3959369,21.0886701 L21.5133893,20.9154421 C21.8817307,20.3447445 22.5145462,20 23.1937892,20 L24,20 L24,8.25 C24,7.71999644 23.6607428,7.31204031 23.2600887,7.25646496 L23.1666667,7.25 Z M13,10 L8,10 L8,20 L13,20 L13,15 L9,15 L9,13 L13,13 L13,10 Z M23,15 L23,17 L17,17 L17,15 L23,15 Z M23,11 L23,13 L17,13 L17,11 L23,11 Z"
                            id="形状"
                            fill="#0B6FD6"
                            fillRule="evenodd"
                          ></path>
                          <rect id="矩形" x="0" y="0" width="32" height="32"></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg> */}
                <span className={cn(i.vam)}>业务负载</span>
              </div>
              <div className={i.primaryColor}>
                <svg
                  className={i.vam}
                  width="14px"
                  height="16px"
                  viewBox="0 0 14 16"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xlink="http://www.w3.org/1999/xlink"
                >
                  <g id="页面设计" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <g id="系统状态-系统负载" transform="translate(-1104.000000, -203.000000)">
                      <g id="编组-6" transform="translate(1101.000000, 201.000000)">
                        <g id="icon/操作编辑类/刷新">
                          <path
                            d="M12.9826943,2.27133848 L14.8576943,5.51893375 L11.610099,7.39393375 L10.985099,6.31140199 L12.0676308,5.68640199 C12.1495439,5.63910944 12.2240794,5.5839458 12.2908334,5.52241801 C11.5772839,5.20332177 10.8016419,5.03623948 10,5.03623948 C6.89339828,5.03623948 4.375,7.55463776 4.375,10.6612395 C4.375,13.7678412 6.89339828,16.2862395 10,16.2862395 C13.0511267,16.2862395 15.5348696,13.8569809 15.6226018,10.8270909 L15.625,10.6612395 L16.875,10.6612395 C16.875,14.4581971 13.7969577,17.5362395 10,17.5362395 C6.20304235,17.5362395 3.125,14.4581971 3.125,10.6612395 C3.125,6.86428183 6.20304235,3.78623948 10,3.78623948 C10.9431705,3.78623948 11.8419814,3.97616507 12.6602741,4.31985738 C12.633225,4.20364706 12.5884339,4.08845946 12.5251625,3.97887024 L11.9001625,2.89633848 L12.9826943,2.27133848 Z"
                            id="路径"
                            fill="#999EA8"
                            fillRule="evenodd"
                          ></path>
                          <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
                        </g>
                      </g>
                    </g>
                  </g>
                </svg>
                <span className={cn(i.vam, i.ml10)}>最近更新时间:</span>
                <span className={cn(i.ml10, i.vam)}>{updateTime}</span>
              </div>
            </div>
            {
            deviceList.length > 1 
            && (
                <div className={s.selBOX}>
                  <Select
                    pro
                    value={[searchInfo]}
                    placeholder="选择设备"
                    option={deviceList}
                    className={s.sel}
                    clearable
                    onChange={({ selectedItem }) => {
                      const e = selectedItem[0]?.value || ''
                      setSearchInfo(e);
                      if (e) {
                        getSysStatus(deviceList[e].device_id);
                        getdate(deviceList[e].node_ip);
                      }
                      setUpdatetime('');
                    }}
                  />
                </div>
              )}
            <div className={i.pt30}>
              <p>网络发包数量: &nbsp;{statusData.net_packets_sent}</p>
              <div id="net_packets_sent" className={cn(i.h100, s.newbors)}></div>
            </div>
            <div className={i.pt30}>
              <p>网络接收包数量: &nbsp;{statusData.net_packets_recv}</p>
              <div id="net_packets_recv" className={cn(i.h100, s.newbors)}></div>
            </div>
            <div className={i.pt30}>
              <p>网络发送bytes数量: &nbsp;{statusData.net_bytes_sent}</p>
              <div id="net_bytes_sent" className={cn(i.h100, s.newbors)}></div>
            </div>
            <div className={i.pt30}>
              <p>网络接收bytes数量: &nbsp;{statusData.net_bytes_recv}</p>
              <div id="net_bytes_recv" className={cn(i.h100, s.newbors)}></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
